@extends('layouts.header')
@section('style')
    tr:hover{
        background-color:#31c1e5;
    }
@endsection
@section('content')
<article class="page-container">
    <form class="form form-horizontal" id="form" autocomplete="off">
        {{ csrf_form_field() }}
        <input type="hidden" name="id" value="">
        <div class="row cl">
            <label class="form-label col-sm-3">属性：</label>
            <div class="formControls col-sm-4">
                <input name="name" type="text" class="input-text required">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">父级属性名：</label>
            <div class="formControls col-sm-4">
                <select class="select2 input-text" id="pname">
                    <option value="">--请选择--</option>
                    @foreach ($list as $item)
                    <option value="{{$item->name}}">{{$item->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="formControls col-sm-4">
                <input class="input-text" type="text" name="pname" value="">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">选项值：</label>
            <div class="formControls col-sm-6" id="options">
                <input  name="options" class="input-text">
            </div>
            <label class="c-red">以英文逗号隔开各选项</label>
        {{-- ii,Yy,Yd,Dy,Dd,ZNd,ZNy,Dzn,Yzn,YNyn,YNd,YNy,Dyn,Yyn,Vv --}}
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">默认值：</label>
            <div class="formControls col-sm-4">
                <input name="val" type="text" class="input-text">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">单位：</label>
            <div class="formControls col-sm-4">
                <input name="unit" type="text" class="input-text">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">计算方法：</label>
            <div class="formControls col-sm-4" id="formulas">
                <input name="formulas" class="input-text">
            </div>
            <label class="c-red">属性名称用大括号《 》包裹；字符串用【】包裹；加号：+；减号：-；乘号：*；除号：/；</label>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">绑定设备数据属性：</label>
            <div class="formControls col-sm-3">
                <select id="station_up_param" class="input-text">
                    <option value="">请选择</option>
                    @foreach($stationParams as $name=>$param)
                    <option value="{{$name}}">{{$name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="formControls col-sm-3">
                <select id="station_up_param2" class="input-text">
                    <option value="">请选择</option>
                </select>
            </div>
            <div class="formControls col-sm-3">
                <input class="input-text" type="text" name="station_up_param" value="">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">备注：</label>
            <div class="formControls col-sm-7">
                <textarea name="remark" class="input-text"></textarea>
            </div>
        </div>

        @csrf

        <div class="row cl pt-20">
            <div class="col-sm-9 col-sm-offset-3">
                <span class="btn btn-primary radius" onclick="sub(1)"> 添 加 </span>
                <span class="btn btn-primary radius ml-15" onclick="sub(0)"> 修 改 </span>
                <span class="btn btn-danger radius ml-15" onclick="layer_close();"> 取 消 </span>
            </div>
        </div>
    </form>

    <div class="page-container">
        <div class="mt-20">
            <!--<div class="f-r mb-10">-->
            <!--    <span class="btn btn-primary radius" id="tb_sub">保存表格</span>-->
            <!--</div>-->
            <table class="table table-border table-bordered table-bg table-responsive">
                <thead>
                    <tr class="text-c">
                        <th>ID</th>
                        <th>属性</th>
                        <th>父级</th>
                        <th>默认值</th>
                        <th>单位</th>
                        <th>计算方法</th>
                        <th>绑定设备数据属性</th>
                        <th>选项值</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody id="tb-body">
                    @foreach ($list as $item)
                    <tr class="text-c">
                        <td class="id">{{$item->id}}</td>
                        <td class="name">{{$item->name}}</td>
                        <td class="pname">{{$item->pname}}</td>
                        <td class="val">{{$item->val}}</td>
                        <td class="unit">{{$item->unit}}</td>
                        <td class="formulas">{{$item->formulas}}</td>
                        <td class="station_up_param">{{$item->station_up_param}}</td>
                        <td class="options">{{$item->options}}</td>
                        <td class="remark">{{$item->remark}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</article>

<script type="text/javascript">
    var tool_id,stationParams = @json($stationParams),trClickObj;
    $(function(){
        $('.select2').select2();
        tool_id = {{request('id','')}};
        if(tool_id == ""){
            layer_msg("请求出错啦！");
            layer_close();
        }
    })

    function sub(add) {
        if(add == 1){
            $('input[name=id]').val('');
        }
        if(!$('#form').valid()){
            layer.msg('请根据提示修改数据！');
            return false;
        }
        console.log($('#form').serialize());
        ajax('post','toolPlate/add?tool_id='+tool_id,$('#form').serialize(),submitBak,1);
        function submitBak(res){
            if(parseInt(res) > 0){
                
            }
            setTimeout(function(){
                location.reload();
            },2000)
            
        }
    }

    $('tbody tr').on('click',function () {
        trClickObj = $(this);
        $('tbody tr').css('background-color','#fff');
        trClickObj.css('background-color','#31c1e5');
        $('input[name=id]').val(trClickObj.find('.id').text().trim());
        $('input[name=name]').val(trClickObj.find('.name').text().trim());
        $('input[name=val]').val(trClickObj.find('.val').text().trim());
        $('input[name=unit]').val(trClickObj.find('.unit').text().trim());
        $('input[name=formulas]').val(trClickObj.find('.formulas').text().trim());
        $('input[name=options]').val(trClickObj.find('.options').text().trim());
        $('input[name=station_up_param]').val(trClickObj.find('.station_up_param').text().trim());
        $('input[name=pname]').val(trClickObj.find('.pname').text().trim());
        $('input[name=remark]').val(trClickObj.find('.remark').text().trim());
    })
    // ii,Yy,Yd,Dy,Dd,ZNd,ZNy,Dzn,Yzn,YNyn,YNd,YNy,Dyn,Yyn,Vv
    // 0,1,2,3,4,5,6,7,8,9,10,11
    // 0,1,2,3,4
    // 1.25,2.5,5
    // 《额定容量》*1.732/《额定电压-高压》
    // 《额定电压-高压》【/】《额定电压-低压》
    // 《额定电流-高压》【/】《额定电流-低压》
    // 【±】《分接极差-分接》【x】《分接极差-极差》
    // 《连接组》《标号》


    $('#station_up_param').on('change',function () {
        let name = $(this).val(),
            params = stationParams[name],
            html='<option value="">请选择</option>';
        $.each(params,function(index,item){
            html += '<option value="'+item.param+'">'+item.param_name+'</option>';
        })
        $('#station_up_param2').html(html);
    })
    $('#station_up_param2').on('change',function () {
        $('input[name=station_up_param]').val($(this).val());
    })
    $('#pname').on('change',function () {
        $('input[name=pname]').val($(this).val());
    })

</script>
@endsection
